<!--
 * @Description: 文件描述
 * @Version: 1.0
 * @Author: YueXuanzi
 * @Date: 2024-09-09 14:42:20
 * @LastEditors: YueXuanzi
 * @LastEditTime: 2024-09-29 10:39:47
 * @心得体会: 无
-->
<template>
    过期表//拓展
    <!-- <div class="w-full">
        <el-form :inline="true" :model="formInline" class="w-full h-10">
            <el-form-item label="药品名称">
                <el-input v-model="formInline.drugName" placeholder="药品名称" clearable class="w-40"/>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSearch">搜索</el-button>
            </el-form-item>
        </el-form>
    </div>
     表格显示 
    <el-table :data="tableData" style="width: 100%" border height="60vh" highlight-current-row @row-dblclick="getInfo">
        <el-table-column prop="id" label="序号" width="80" align="center"></el-table-column>
        <el-table-column prop="drugName" label="药品名称"  align="center"></el-table-column>
        <el-table-column prop="number" label="数量"  align="center"></el-table-column>
        <el-table-column prop="unit" label="单位"  align="center"></el-table-column>
        <el-table-column prop="price" label="单价"  align="center"></el-table-column>
        <el-table-column label="操作"  align="center">
            <template #default="scope">
                <el-button type="primary" @click="getInfo(scope.row)">出库</el-button>
                <el-button type="success" @click="getInfo(scope.row)">入库</el-button>
            </template>
        </el-table-column>
    </el-table>
    <div class="flex justify-center items-end w-full h-16 mt-2">
        <el-pagination
            v-model:current-page="pageForm.currentPage"
            v-model:page-size="pageForm.pageSize"
            :page-sizes="[10, 20, 30, 40]"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageForm.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            />
            <el-switch v-model="background" class="ml-2" />
    </div> -->
    
</template>

<script setup>
import { computed, ref, reactive } from 'vue'
// 表格数据
const tableData = ref([
    { id : 1, drugName : "药1", number : 10, unit : "盒", price : 100 },
    { id : 2, drugName : "药2", number : 20, unit : "支", price : 200 },
    { id : 3, drugName : "药3", number : 30, unit : "kg", price : 300 },
    { id : 4, drugName : "药4", number : 40, unit : "盒", price : 400 },
    { id : 5, drugName : "药5", number : 50, unit : "盒", price : 500}
]) 
// 北京
const background = ref(false)
// 最后一页面
const pageForm = ref({
    currentPage: 1,
    pageSize: 10,
    total: 50
})
// 搜索
const formInline = reactive({
    drugName: "",
})
const pageSerch = computed(() => {
  return {
    currentPage: pageForm.value.currentPage,
    pageSize: pageForm.value.pageSize,
    drugName: formInline.drugName
  }
})
// 搜搜
const onSearch = () => {
  console.log(pageSerch)
}
// 双击查看
const getInfo = (row, event, column) => {
  console.log(row.id)
}

const handleSizeChange = (val) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`)
}

</script>

<style scoped>

</style>